<template>
    <div>
        <!-- 面包屑导航 -->
        <Breadcrumb></Breadcrumb>
        <!-- 产品搜索 -->
        <div class="header">
            <div class="form">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="产品名称">
                        <el-input v-model="formInline.name" @blur="blur" size="small" placeholder="产品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="添加时间">
                        <el-date-picker v-model="formInline.date" size="small" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="group">
                <el-button size="small" type="warning" icon="el-icon-plus" @click="toProductPage">添加商品</el-button>
                <el-button size="small" type="danger" icon="el-icon-delete" @click="deleteAll">批量删除</el-button>
                <el-button type="primary" @click="openForm">打开表单</el-button>
            </div>

        </div>
        <!-- 产品列表 -->
        <div class="content">
            <el-table :data="tableData" style="width: 100%" border header-cell-class-name="active-header"
                cell-class-name="table-center" @select="selectHandle" @select-all="selectHandle">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="id" label="商品编号" width="120">
                </el-table-column>
                <el-table-column prop="title" label="商品名称" width="180" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span style="color: blue; cursor: pointer;" @click="handleLook(scope.$index, scope.row)">{{ scope.row.title }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="商品价格" width="120">
                </el-table-column>
                <el-table-column prop="category" label="商品类目" width="120">
                </el-table-column>
                <el-table-column prop="createTime" label="添加时间" width="200">
                    <template slot-scope="scope">
                        <span>{{ moment(scope.row.createTime).format('YYYY-MM-DD HH:MM:SS') }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sellPoint" label="商品卖点" width="120">
                </el-table-column>
                <el-table-column prop="descs" label="商品描述" width="180" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ removeHTMLTag(scope.row.descs) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品图片" width="180" show-overflow-tooltip>
                    <el-image style="width: 100px; height: 100px" :src="img" :preview-src-list="imgList">
                    </el-image>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)"
                            icon="el-icon-edit">Edit</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
                            icon="el-icon-delete">Delete</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <div class="pagination">
                <Pagination :total="total" :pageSize="pageSize" @CurrentChange="CurrentChange"></Pagination>
            </div>
        </div>

        <!-- //测试样例-新增页面 -->
        <el-dialog title="新增商品" :visible.sync="showForm" width="30%" :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="即时配送">
                    <el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="活动性质">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="特殊资源">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="线上品牌商赞助"></el-radio>
                        <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动形式">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

    </div>

</template>
<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import moment from 'moment';
import { removeHTMLTag } from '@/utils/common.js'
import { mapMutations } from 'vuex'

export default {
    components: {
        Pagination
    },
    data() {
        return {
            showForm: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formInline: {
                name: '',
                date: ''
            },
            tableData: [],
            total: 10,
            pageSize: 10,
            current: 1,//
            ids: [],//存储选中的id
            img: 'http://localhost:100032/files/3c5a5cea-243b-42fa-a86c-0713b802e72b.png',
            imgList: ['http://localhost:100032/files/3c5a5cea-243b-42fa-a86c-0713b802e72b.png', 'http://localhost:10001/files/02f4f3da-cfbc-4062-9f6e-5d52f76f347c.jpg']
        }
    },
    methods: {
        moment,//在这里注册一下momont方法
        removeHTMLTag,//在这里注册一下removeHTMLTag方法
        ...mapMutations('product', ['changeRowData','changeTitle']),

        openForm() {
            this.showForm = true;
        },
        //选中之后，批量删除
        selectHandle(selection) {
            console.log("-----selection", selection)
            let arr = []
            selection.forEach(element => {
                arr.push(element.id)
            });
            console.log("-----arr", arr)
            this.ids = arr;
        },

        //详情
        handleLook(index,row){
            this.changeRowData(row)
            this.changeTitle('详情')
            this.$router.push('/product/add-product')
        },
        //搜索按钮
        onSubmit() {
            console.log('suubmit---', this.formInline)
            this.search(this.formInline)
        },
        //分页
        CurrentChange(val) {
            console.log("-----val----页码", val);
            this.current = val
            this.projectList(val);
        },
        //搜索时失去焦点
        blur() {
            if (!this.formInline.name) {
                this.projectList(1);
            }
        },
        
        //添加
        toProductPage() {
            this.changeTitle('添加')
            this.$router.push('/product/add-product')
        },
        //编辑
        handleEdit(index, row) {
            console.log(index, row)
            //存储当前行的数据--vuex---跳转到另外一个界面--获取vuex行数据
            this.changeRowData(row)
            this.changeTitle('编辑')
            //跳转编辑界面------------------
            this.$router.push('/product/add-product')
        },


        // 删除
        handleDelete(index, row) {
            console.log(index, row)
            this.$confirm('是否删除该文件', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //执行删除
                console.log("----当前行的id：", row.id)
                this.deleteItemById(row.id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        async projectList(page) {
            let res = await this.$api.projectList({ page })
            console.log('产品列表数据----', res.data);
            this.tableData = res.data.resultValue;
            this.total = res.data.total;
            //加载图片
            // this.tableData.forEach(item=>{
            //     console.log("item===",item)
            //     this.imgList.push(item.image)

            // })
        },

        async search(params) {
            let res = await this.$api.search({ params })
            if (res.data.code == 200) {
                this.tableData = res.data.resultValue;
                this.total = res.data.total;
            } else {
                this.tableData
                this.total = 1;

            }
        },


        async deleteItemById(id) {
            let res = await this.$api.deleteItemById({ id })
            console.log('数据----', res);
            if (res.data.code === 200) {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                //用来判断是否是最后一页的最后一条
                if (this.total % this.pageSize === 1) {
                    this.current = --this.current > 0 ? --this.current : 1
                }
                console.log("当前页----", this.current)
                //重新渲染视图
                this.projectList(this.current)
            }
        },
        //批量删除
        async deleteAll() {
            let idStr = this.ids.join(",");
            this.$confirm('是否删除文件', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //执行删除
                this.$api.batchDelete({ ids: idStr }).then((res => {
                    if (res.data.code === 200) {
                        //弹出删除成功的信息
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });
                        //------批量删除-----------------------

                        //获取当前是否是最后一页的数据操作-----------
                        //获取当前的数据可以展示多少页码  16/8=2   17/8=3  --- 最大的页码数
                        let maxPage = Math.ceil(this.total / this.pageSize);
                        console.log('最大的页码数--', maxPage);
                        //获取选中的个数--- 
                        let len = this.ids.length;
                        console.log('选中的个数--- ', len);
                        //分析：批量删除的时候 删的位置最后一页的数据  再去比较删除的个数与最后一页的条数比较  
                        //删除个数==最后一页的条数 选中高亮的页码-1 请求页码数据也就是高亮页码
                        if (maxPage == this.current) {//最后一页的批量删除操作
                            //最后一页的数据条数---------------
                            let num = this.total % this.pageSize == 0 ? this.pageSize : this.total % this.pageSize;
                            console.log('最后一页的数据条数---', num);
                            if (num === len) {
                                this.current = this.current - 1 > 0 ? this.current - 1 : 1;
                            }
                        }
                        this.projectList(this.current)
                    }
                }
                ))
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },


    },
    created() {
        this.projectList(1);



    }
}

</script>

<style lang="less" scoped>
.header {
    background: #FFF;
    margin-bottom: 20px;
    padding: 10px;

    .el-form-item {
        margin-bottom: 10px;
    }

    .group {
        border: 1px solid #eee;
        padding: 8px;
    }
}

.content {
    background: #FFF;

    /deep/ .active-header {
        color: #333;
        text-align: center;
    }

    /deep/ .table-center {
        text-align: center;
    }

    .pagination {
        padding: 10px;

    }
}

.el-table {
    padding: 20px
}
</style>
